<script>
import {ElMessage, ElMessageBox} from 'element-plus'

export default {
  name:"AwaitingPayment",
  data(){
    return  {
      tableData:[],
    }
  },
  methods: {
    LoadAwaitingShipmentData() {
      this.$http.get("http://localhost:8080/order/AwaitingPayment").then((res) => {
        this.tableData = res.data;
        console.log(this.tableData)
      }).catch(function (err) {
        console.log(err);
      })
    },
    DelOrder(order_id) {
      this.$http.get("http://localhost:8080/order/del/" + order_id).then((res) => {
        console.log(res.data);
        if (res.data == 1) {
          console.log("删除成功！");
          ElMessage({
            message: '删除成功！',
            type: 'success',
          })
          this.LoadAwaitingShipmentData()
        } else {
          ElMessage({
            message: '删除失败！',
            type: 'warning',
          })
          console.log("删除失败！");
        }
      }).catch(function (err) {
        console.log(err);
      })
    },
    cancelEvent() {
    }

  },
  mounted() {
    this.LoadAwaitingShipmentData();
  }
}
</script>

<template>
  <el-card style="max-width:100%">
    <template #header>
      <div class="card-header">
        <span>待付款</span>
      </div>
    </template>
    <el-table :data="tableData" height="500" style="width: 100%">
      <el-table-column prop="order_id" label="订单编号" width="80" />
      <el-table-column prop="goods_image" label="商品图片" width="180">
        <template #default="{ row }">
          <img v-if="row.goods_image"
               :src="`http://localhost:8080/image/upload/${row.goods_image}`"
               alt="goods_image"
               style="width: 100%; height: auto;">
        </template>
      </el-table-column>
      <el-table-column prop="goods_description" label="商品介绍" width="180" />
      <el-table-column prop="count" label="购买数量" width="80" />
      <el-table-column prop="subtotal" label="待付款金额" width="180" />
      <el-table-column fixed="right" label="操作" width="270">
        <template #default="scope">    <!--自定义内容 在template内加上#default-->
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon-color="#626AEF"
                         title="确定取消订单吗?" @confirm="DelOrder(scope.row.order_id)" @cancel="cancelEvent">
            <template #reference>
              <el-button round type="danger" size="small">
                取消订单
              </el-button>
            </template>
          </el-popconfirm>
        <!--<el-button  type="primary" size="small" >去支付</el-button>-->
        </template>
      </el-table-column>
    </el-table>
  </el-card>

</template>

<style>

</style>